
<template>
	<view class="pages-index">
		<view class="carousel">
			<image style="width: 100%;height: 100%;" :src="form.image" mode="aspectFill"></image>
		</view>
		<view class="name-box">
			<view class="item-right">
				<view class="title-cont">
					<view class="left-box">
						<view class="title">
							{{form.title}}
						</view>
						<view class="tag-box">
							<view class="tag1" v-if="form.tag1">
								{{form.tag1}}
							</view>
							<view class="tag2" v-if="form.tag2">
								{{form.tag2}}
							</view>
						</view>
					</view>
					<view class="right-box">
						<view class="price">
							￥{{form.price}}
						</view>
						<view class="price2">
							￥{{form.price2}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="tiem-box">
			<view class="title-box">
				选择日期
			</view>
			<view class="list" >
				<view class="item-box-yes" >
					<view class="price-yes">
						￥130.00
					</view>
					<view class="tiem-yes">
						07-09
					</view>
				</view>
				<view class="item-box-no" v-for="(item,index) in 3">
					<view class="price-no">
						￥130.00
					</view>
					<view class="tiem-no">
						07-09
					</view>
				</view>
				<view class="more-box-no">
					<view class="">
						更多
					</view>
					<view class="">
						日期
					</view>
				</view>
			</view>
			<view class="everyday-box">
				<view class="everyday-list">
					<view class="item-box-yes">
						<view class="day-yes">
							08:00-1200
						</view>
						<view class="details-yes">
							<view style="item-details-yes">
								<view class="have-yes">
									已购：0
								</view>
								<view class="residue-yes">
									剩余：10000
								</view>
							</view>
						</view>
					</view>
					<view class="item-box-no">
						<view class="day-no">
							08:00-1200
						</view>
						<view class="details-no">
							<view style="item-details-no">
								<view class="have-no">
									已购：0
								</view>
								<view class="residue-no">
									剩余：10000
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="num-box">
				<view class="title-num">
					选择数量
				</view>
				<view class="select-box">
					<view class="minus">
						-
					</view>
					<view class="num">
						1
					</view>
					<view class="add">
						+
					</view>
				</view>
			</view>
		</view> -->
		<view class="info-box">
			<view class="title-info">
				包含项目
			</view>
			<view class="details-info">
				{{form.content}}
			</view>
		</view>
		<view class="info-box">
			<view class="title-info">
				购票须知
			</view>
			<view class="details-info">
				尊敬的游客:
				微山湖旅游区欢迎您!在您进入景区前，请详细了解购票须知:
				1、每次进入景区游览均需出示景区门票，请您安排排好时间，以免造成重复购票。
				2、一人一票，凭票参观，检票进入景区后概不退票
				3、注意安全提示标志和工作人员的提醒，爱护景区内的资源和旅游设施。
				4、在景区内看管好老人和孩子，以免发生意外。
				(一)、微山湖旅游区各项目运营时间、网络票使用和检票时间:
				1、网络订单预定后即时生效。
				2、微山湖旅游区开放时间:
				冬季:09:00一17:00
				微山岛岛内外游船发行时间:
				登岛末班船:15:00 出岛末班船:16:30登船地点:微山湖旅游区游客中心(岛外) 大官码头(岛内)微小湖旅游区16:00停止检票入园，17:00闭园
				微山湖旅游区开放时间:
				夏季8: 30-17: 30
				微山岛岛内外游船发行时间:08:30-17:30
				登岛未班船:17:00 出岛未班船:17:30，
				登船地点:微山湖旅游区游客中心(岛外) 大官码头(岛内):微山湖旅游区17: 00停止入园，17: 30闭园
				温馨提示:
				节假日期间微山岛轮渡等待时间过长，建议游客朋友请由游客中心购买游船票后登陆微山岛。
				3、购票后无需兑票，持二维码即可使用!
				温馨提示:游客朋友购买微山岛游船票后请由游客中心登陆微山岛;
				(二)、景区门票优惠与免门票人群
				1、门票免费《不含交通工具)
				(1) 老年人60周岁以上(含60周岁)，持有效证件享受景区门票免费优惠。
				(2)儿童6周岁以下(含6周岁)或身高1.4米(含)以下，现场测量身高或持有效证件享受景区门票免费优惠。
				(3)消防救援人员凭本人千部证、消防员证(含政府专职消防员)、学员证。
				(4)残疾人凭有新版《中华人民共和国残疾证》
				(5) 现役、退役军人凭士兵证、军官证、军校学员证退役军人相关证件。
				(6)离休干部凭离休证等相关有效证件。
				(7)高层次人才凭“山东惠才卡”
				(8)军残人士凭新版军残证
				(9)医护人员凭医师证、护士证、药师证、医技证等医务工作相关有效证件。
				(8)军残人士凭新版车残证。
				(9)医护人员凭医师证、护士证、药师证、医技证等医务工作相关有效证件。
				(10)微山岛镇居民持身份证、户口本等有效证件《微山岛景区);微山县户籍人员 微山县居民《湿地公园)。2、门票半价《不含交通工具)
				(1)儿童6-18周岁(含)未成年人，持有效证件享受景区门票半价优惠。
				(2)学生凭有效学生证件享受景区门票半价优惠
				(三)、微山湖旅游区交通优惠人群
				1、观光车半价票
				老年人60周岁以上(含60周岁)，持有效证件享受景区观光车票半价优惠。
				2、观光车、游船免票
				儿童 1.2米(含)以下儿童免票，现场测量身高。(四)、停车场现执行收费标准:
				大型车辆(20座以上)每辆车/10元/次
				中小型车辆
				每辆车/10元/次。
				减免政策:
				1、执行公务且按规定在车身设胃明显标识的军车、警车、行政执法车、消防车、救护车、工程抢险车、市政服务车等车辆:
				2、残疾人(持有残疾证)专用车辆。
				备注:
				1、停车30分钟内免收停车费
				费
				2、每次按(30分钟-24小时)计算，超过24小时累计收
				咨询电话:0537-8550005
				救援电话:0537-8330005
			</view>
		</view>
		<view class="buy-box">
			<view class="price-buy">
				总价：<text style="color: red;">￥{{form.price}}</text>
			</view>
			<view class="buy" @click="buyBnt()">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				form:{}
			}
		},
		onLoad(params) {
			this.form= JSON.parse(params.params)
			this.getList()
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 列表
			getList() { 
				// this.$http.get(this.$httpApi.cyList, {
				// 	data: {
				// 		 page: this.page,
				// 		 limit:this.limit,
				// 		 title: this.title,
				// 	}
				// }).then(res => {
				// 	if (res.code == 0) {
				// 		this.List = res.page
				// 		console.log(JSON.parse(res.page[0].catering.content))
				// 	}
				// })
			},
			// 立即购买
			buyBnt() {
				uni.navigateTo({
					url:`/pages/ship/buy/index?params=${JSON.stringify(this.form)}`
				})
				
			},
			detilsBnt(e) {
				uni.navigateTo({
					url:'/pages/ship/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages-index{
		padding-bottom: 200rpx;
		.carousel {
			width: 100%;
			background: #f5f5f5;
			height: 380rpx;
		}
		.name-box {
			background: #fff;
			padding: 20rpx;
			.item-right {
				margin-left: 24rpx;
				margin-right: 24rpx;
				line-height: 40rpx;
				.title-cont {
					display: flex;
					align-items: center;
					.left-box {
						.title {
							font-size: 30rpx;
						}
						.tag-box {
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							.tag1 {
								border-radius: 5rpx;
								padding: 0rpx 10rpx 0rpx 10rpx;
								font-size: 16rpx;
								border: 1rpx solid #11bf8e;
								color: #11bf8e;
							}
							.tag2 {
								margin-left: 10rpx;
								border-radius: 5rpx;
								padding: 0rpx 10rpx 0rpx 10rpx;
								font-size: 16rpx;
								border: 1rpx solid #e19a35;
								color: #e19a35;
							}
						}
					}
					.right-box {
						margin-left: auto;
						.price {
							font-size: 30rpx;
							font-weight: bold;
							color: #D93C3C;
						}
						.price2 {
							text-align: right;
							font-size: 22rpx;
							color: #c6c6c6;
							text-decoration:line-through;
						}
					}
				}
			}
		}
		.tiem-box {
			margin-top: 10rpx;
			background: #fff;
			padding-left: 24rpx;
			padding-right: 24rpx;
			.title-box {
				padding-top: 20rpx;
				font-size: 30rpx;
			}
			.list {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #c6c6c6;
				.item-box-yes {
					margin-right: 20rpx;
					border-radius: 15rpx;
					border: 1px solid #11bf78;
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-top: 5rpx;
					padding-bottom: 20rpx;
					.price-yes {
						font-size: 20rpx;
						color: #11bf78;
						text-align: center;
					}
					.tiem-yes {
						font-size: 20rpx;
						color: #11bf78;
						text-align: center;
					}
				}
				.item-box-no {
					margin-right: 20rpx;
					border-radius: 15rpx;
					border: 1px solid #dbdbdb;
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-top: 5rpx;
					padding-bottom: 20rpx;
					.price-no {
						font-size: 20rpx;
						color: #808080;
						text-align: center;
					}
					.tiem-no {
						font-size: 20rpx;
						color: #808080;
						text-align: center;
					}
				}
				.more-box-no {
					border-radius: 15rpx;
					border: 1px solid #dbdbdb;
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-top: 5rpx;
					padding-bottom: 20rpx;
					font-size: 20rpx;
					color: #808080;
					text-align: center;
				}
			}
		}
		.everyday-box {
			margin-top: 30rpx;
			.everyday-list {
				display: flex;
				align-items: center;
				padding-bottom: 30rpx;
				.item-box-yes {
					overflow: hidden;
					border-radius: 15rpx;
					border: 1px solid #11bf78;
					width: 204rpx;
					margin-right: 10rpx;
					.day-yes {
						padding-top: 20rpx;
						padding-bottom: 20rpx;
						border-radius: 15rpx 15rpx 0 0;
						background: #11bf78;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
					}
					.details-yes {
						padding-top: 15rpx;
						padding-bottom: 15rpx;
						display: flex;
						justify-content: center;
						.have-yes {
							font-size: 18rpx;
							color: #666666;
						}
						.residue-yes {
							font-size: 18rpx;
							color: #666666;
						}
					}
				}
				.item-box-no {
					overflow: hidden;
					border-radius: 15rpx;
					border: 1px solid #c4c4c4;
					width: 204rpx;
					margin-right: 10rpx;
					.day-no {
						padding-top: 20rpx;
						padding-bottom: 20rpx;
						border-radius: 15rpx 15rpx 0 0;
						background: #f5f5f5;
						text-align: center;
						font-size: 24rpx;
						color: #000;
					}
					.details-no {
						padding-top: 15rpx;
						padding-bottom: 15rpx;
						display: flex;
						justify-content: center;
						.have-no {
							font-size: 18rpx;
							color: #666666;
						}
						.residue-no {
							font-size: 18rpx;
							color: #666666;
						}
					}
				}
			}
		}
		.num-box {
			display: flex;
			padding-bottom: 30rpx;
			.title-num {
				font-size: 30rpx;
			}
			.select-box {
				margin-left: auto;
				display: flex;
				align-items: center;
				.minus {
					border: 1px solid #ededed;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.num {
					border-top: 1px solid #ededed;
					border-bottom: 1px solid #ededed;
					width: 60rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.add {
					border: 1px solid #ededed;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.info-box {
			margin-top: 10rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
			padding-left: 24rpx;
			padding-right: 24rpx;
			background: #fff;
			.title-info {
				font-size: 30rpx;
			}
			.details-info {
				margin-top: 40rpx;
				font-size: 24rpx;
				color: #8c8c8c;
			}
		}
		.buy-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 150rpx;
			background: #fff;
			display: flex;
			align-items: center;
			.price-buy {
				margin-left: 24rpx;
			}
			.buy {
				width: 200rpx;
				height: 100rpx;
				display: flex;
				background: #11bf78;
				align-items: center;
				justify-content: center;
				margin-left: auto;
				color: #fff;
			}
		}
	}
</style>
